<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通知公告</el-breadcrumb-item>
      <el-breadcrumb-item>公告</el-breadcrumb-item>
    </el-breadcrumb>

    <hr />

    <!-- 搜索区域 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="5" class="plugOn">
          <el-date-picker
            v-model="timeInfo"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @blur="getNtsList"
          >
          </el-date-picker>
        </el-col>
      </el-row>

      <!-- 功能区域 -->
      <el-row :gutter="10">
        <el-col :span="6" class="plugOn">
          <el-button type="primary" @click="addDialogVisible = true"
            >添加公告</el-button
          >
        </el-col>
      </el-row>

      <!-- 公告列表区域 -->
      <div class="noticeBox">
        <div
          v-if="ntsList.length < 1"
          style="text-align: center; margin: 10px 0"
        >
          未找到相关内容
        </div>
        <div class="nts" v-for="item in ntsList" :key="item.noticeId">
          <el-row :gutter="10">
            <el-col :span="6">
              <div class="ntsTitle">{{ item.noticeTitle }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="ntsContent">{{ item.noticeContent }}</div>
            </el-col>
            <el-col :span="5">
              <div class="ntsContent">
                {{
                  '发布者：' +
                    item.createBy +
                    '  发布时间：' +
                    dateFormat(item.createTime, 2)
                }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="operat">
                <el-link
                  type="info"
                  icon="el-icon-edit"
                  style="margin-right: 20px;"
                  @click="showEditDialog(item.noticeId)"
                  >编辑</el-link
                >
                <el-link
                  type="danger"
                  icon="el-icon-delete"
                  @click="showDelDialog(item.noticeId)"
                  >删除</el-link
                >
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 分页区域 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page"
        :page-size="queryInfo.size"
        layout="total, prev, pager, next"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 添加公告 -->
    <el-dialog
      title="添加公告"
      :visible.sync="addDialogVisible"
      width="width"
      @close="addDialogClosed"
    >
      <el-form
        ref="addRef"
        :model="addForm"
        :rules="addRules"
        label-width="100px"
      >
        <el-form-item label="标题" prop="noticeTitle">
          <el-input
            v-model="addForm.noticeTitle"
            placeholder="请输入标题"
            type="text"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="noticeContent">
          <el-input
            type="textarea"
            maxlength="300"
            show-word-limit
            v-model="addForm.noticeContent"
            placeholder="请输入公告内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSub">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑公告 -->
    <el-dialog title="编辑公告" :visible.sync="editDialogVisible" width="width">
      <el-form
        ref="editRef"
        :model="editForm"
        :rules="editRules"
        label-width="100px"
      >
        <el-form-item label="标题" prop="noticeTitle">
          <el-input
            v-model="editForm.noticeTitle"
            type="text"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="noticeContent">
          <el-input
            type="textarea"
            maxlength="300"
            show-word-limit
            placeholder="请输入公告内容"
            v-model="editForm.noticeContent"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSub">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除警告框 -->
    <el-dialog title="警告" :visible.sync="delDialogVisible" width="30%">
      <span>您确定要删除此公告吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delSub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeInfo: '',
      queryInfo: {
        info: '',
        page: 1,
        size: 10
      },
      ntsList: [],
      total: 0,
      addDialogVisible: false,
      addForm: {
        noticeTitle: '',
        noticeContent: '',
        createBy: ''
      },
      addRules: {
        noticeTitle: [
          { required: true, message: '请输入标题信息', trigger: 'blur' }
        ],
        noticeContent: [
          { required: true, message: '请输入内容信息', trigger: 'blur' }
        ]
      },
      editDialogVisible: false,
      editForm: {
        noticeId: '',
        noticeTitle: '',
        noticeContent: '',
        updateBy: ''
      },
      editRules: {
        noticeTitle: [
          { required: true, message: '请输入标题信息', trigger: 'blur' }
        ],
        noticeContent: [
          { required: true, message: '请输入内容信息', trigger: 'blur' }
        ]
      },
      delDialogVisible: false,
      delId: 0
    }
  },
  created() {
    this.getNtsList()
  },
  methods: {
    async getNtsList() {
      try {
        var time = this.timeInfo
        if (time.length > 0) {
          var start = this.dateFormat(time[0], 1)
          // 增加1天
          var end = this.dateFormat(this.addOneDay(time[1]), 1)
          this.queryInfo.info = start + ',' + end
          //   console.log(this.queryInfo.info)
        }
      } catch (e) {
        this.queryInfo.info = ''
      }
      const { data: res } = await this.$http.get('nts/list', {
        params: this.queryInfo
      })
      if (res.code !== 20000) {
        return this.$message.error('查询失败!')
      }
      this.ntsList = res.data.list
      this.total = res.data.total
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getNtsList()
    },
    addOneDay(value) {
      var date = new Date(value)
      date.setDate(date.getDate() + 1)
      return date
    },
    dateFormat(value, way) {
      var date = new Date(value)
      var year = date.getFullYear()
      var month = this.fixZero(date.getMonth() + 1)
      var day = this.fixZero(date.getDate())
      if (way === 1) {
        return `${year}-${month}-${day}`
      }
      var hour = this.fixZero(date.getHours())
      var minutes = this.fixZero(date.getMinutes())
      var seconds = this.fixZero(date.getSeconds())
      return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
    },
    fixZero(value) {
      return value < 10 ? '0' + value : value
    },
    // 增
    addSub() {
      this.$refs.addRef.validate(async valid => {
        if (!valid) return
        this.addForm.createBy = window.sessionStorage.getItem('rootname')
        const { data: res } = await this.$http.post('nts/add', this.addForm)
        if (res.code !== 20000) {
          return this.$message.error('添加失败!')
        }
        this.getNtsList()
        this.addDialogVisible = false
        return this.$message.success('添加成功!')
      })
    },
    addDialogClosed() {
      this.$refs.addRef.resetFields()
    },
    // 改
    async showEditDialog(id) {
      const { data: res } = await this.$http.get('nts/one/' + id)
      if (res.code !== 20000) {
        return this.$message.error('查询失败!')
      }
      this.editForm = res.data
      this.editDialogVisible = true
    },
    editSub() {
      this.$refs.editRef.validate(async valid => {
        if (!valid) return
        this.editForm.updateBy = window.sessionStorage.getItem('rootname')
        const { data: res } = await this.$http.put('nts/update', this.editForm)
        if (res.code !== 20000) {
          return this.$message.error('更新失败!')
        }
        this.getNtsList()
        this.editDialogVisible = false
        return this.$message.success('更新成功!')
      })
    },
    // 删
    showDelDialog(id) {
      this.delId = id
      this.delDialogVisible = true
    },
    async delSub() {
      const { data: res } = await this.$http.delete('nts/del/' + this.delId)
      if (res.code !== 20000) {
        return this.$message.error('删除失败!')
      }
      this.getNtsList()
      this.delDialogVisible = false
      return this.$message.success('删除成功!')
    }
  }
}
</script>

<style lang="less" scoped>
.el-col .plugOn {
  line-height: 40px;
}

.el-row {
  margin-bottom: 10px;
  text-align: left;
}
.noticeBox {
  margin-top: 10px;
  font-weight: bolder;
  text-align: left;
  border: 1px #dcdfe6 solid;
  color: #606266;
  padding: 5px 20px;
}
.nts {
  margin: 10px 0;
  border-bottom: 1px #e4e7ed solid;
}
.ntsTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ntsContent {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 10px 5px;
  font-weight: normal;
  color: #909399;
  font-size: 12px;
}
.operat {
  float: right;
}
</style>
